<template>
  <div class="app-container calendar-list-container">
    <!-- 列表页面筛选项及工具栏 -->
    <div class="filter-container">
      <org-tree
        :dcksValue.sync="listQuery.orgCode"
        :dcksLabel.sync="listQuery.orgDescr"
        :checkStrictly="false"
        :isDialog="true"
      ></org-tree>
      <el-date-picker
        id="dp"
        v-model="dateSech"
        type="daterange"
        @change="dateSechChange"
        align="right"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      ></el-date-picker>
      <el-input
        @keyup.enter.native="handleFilter"
        style="width: 200px"
        v-model="listQuery.item"
        placeholder="培训项目"
        clearable
      ></el-input>
      <el-select v-model="listQuery.enable" placeholder="计划状态" clearable>
        <el-option label="草稿" value="0"></el-option>
        <el-option label="待审核" value="1"></el-option>
        <el-option label="已审核" value="2"></el-option>
      </el-select>
      <el-select v-model="listQuery.actualEnable" placeholder="计划完成情况" clearable>
        <el-option label="未完成" value="0"></el-option>
        <el-option label="已完成" value="1"></el-option>
        <el-option label="取消" value="-1"></el-option>
      </el-select>
      <el-select v-model="listQuery.level" placeholder="优先级别" clearable>
        <el-option label="高" value="0"></el-option>
        <el-option label="中" value="1"></el-option>
        <el-option label="低" value="2"></el-option>
      </el-select>
      <el-select v-model="listQuery.type" placeholder="计划类型" clearable>
        <el-option label="月计划" value="0"></el-option>
        <el-option label="临时计划" value="1"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        @click="handleCreate"
        type="primary"
        icon="edit"
      >添加</el-button>
      <el-button class="filter-item" type="primary" icon="document" @click="handleDownload">导出</el-button>
      <el-button
        class="filter-item"
        type="primary"
        :disabled="this.sels.length === 0"
        v-waves
        icon="delete"
        @click="handleDel"
      >删除</el-button>
      <el-checkbox class="filter-item" @change="tableKey=tableKey+1" v-model="showAuditor">显示详细</el-checkbox>
    </div>
    <!-- table -->
    <el-table
      height="400"
      @selection-change="selsChange"
      :key="tableKey"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag
            size="medium"
            :type="scope.row.enable === '1' ? 'success' : 'error'"
          >{{scope.row.enable | enableFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="优先级别" prop="level" width="100">
        <template slot-scope="scope">
          <el-tag
            size="medium"
            :type="scope.row.level === '1' ? 'success' : 'error'"
          >{{scope.row.level | levelFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="计划类型" prop="type" width="100">
        <template slot-scope="scope">
          <el-tag
            size="mini"
            :type="scope.row.type  === '1' ? 'success' : 'error'"
          >{{scope.row.type | typeFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="培训日期" prop="date" width="100"></el-table-column>
      <el-table-column label="培训时间" prop="time" width="80"></el-table-column>
      <el-table-column v-if="showAuditor" label="培训地点" prop="place" width="150"></el-table-column>
      <el-table-column v-if="showAuditor" label="培训课时" prop="hour" width="150">
        <template slot-scope="scope">
          <el-tag
            size="medium"
            :type="scope.row.hour === '1' ? 'success' : 'error'"
          >{{scope.row.hour | hourFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="培训班组" prop="orgDescr" width="150">
        <template slot-scope="scope">
          <el-tag :key="tag" v-for="tag in scope.row.orgDescr">{{tag}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="培训岗位" prop="post" width="150"></el-table-column>
      <el-table-column label="授课人" prop="teacher" width="150">
        <template slot-scope="scope">
          <el-tag :key="tag" v-for="tag in scope.row.teacher" :disable-transitions="false">{{tag}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="培训对象" prop="students" width="150">
        <template slot-scope="scope">
          <el-tag :key="tag" v-for="tag in scope.row.students">{{tag}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="培训形式" prop="form" width="150">
        <template slot-scope="scope">
          <el-tag :key="tag" v-for="tag in scope.row.form" :disable-transitions="false">{{tag}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="培训类别" prop="cate" width="150">
        <template slot-scope="scope">
          <el-tag
            size="medium"
            :type="scope.row.cate === '1' ? 'success' : 'error'"
          >{{scope.row.cate | cateFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="培训项目" prop="item" width="150"></el-table-column>
      <el-table-column v-if="showAuditor" label="培训目的" prop="aim" width="150"></el-table-column>
      <el-table-column v-if="showAuditor" label="培训内容" prop="content" width="150"></el-table-column>
      <el-table-column v-if="showAuditor" label="培训材料" show-overflow-tooltip prop="files">
        <template slot-scope="scope">
          <!-- <a :href="downloadUrl+'?generateWord='+ fl.ikey+'&fileName='+encodeURI(encodeURI(fl.name))" target="_blank" v-for="fl in scope.row.files" :key="fl.ikey" v-text="fl.name"></a> -->
          <el-tag
            :key="fl.name"
            v-for="fl in scope.row.files"
            :disable-transitions="false"
          >{{fl.name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="关联规章制度" width="200">
        <template slot-scope="scope">
          <!-- 直接显示文件名称 -->
          <el-tag v-for="(file,index) in scope.row.ruleLabel" :key="index">{{file}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="学习资料库" width="200">
        <!-- <template scope="scope" >
     <el-tag v-for="file in scope.row.fileLib" :key="file.fileValue" >{{file.fileLabel}}</el-tag>
        </template>-->
        <template slot-scope="scope">
          <!-- 直接显示文件名称 -->
          <el-tag v-for="(file,index) in scope.row.fileLabel" :key="index">{{file}}</el-tag>
          <!-- 文件名称加外网下载链接 -->
          <!-- <a :href="downloadUrlQn+key+'?attname='+encodeURI(encodeURI(scope.row.fileLabel[index]))" target="_blank" v-for="(key,index) in scope.row.fileQNkey" :key="index">{{scope.row.fileLabel[index]}}</a> -->
          <!-- 桌面端连接内网下载或预览 -->
          <!-- <a :href="downloadUrl+'?generateWord=' +key +'&fileName='+ encodeURI(encodeURI(scope.row.fileLabel[index]))" target="_blank" v-for="(key,index) in scope.row.fileValue" :key="index">{{scope.row.fileLabel[index]}}</a> -->
        </template>
      </el-table-column>
      <el-table-column v-if="showAuditor" label="创建时间" prop="createDate" width="150"></el-table-column>
      <el-table-column v-if="showAuditor" label="创建人员" prop="createMember" width="150"></el-table-column>
      <el-table-column v-if="showAuditor" label="修改时间" prop="updateDate" width="150"></el-table-column>
      <el-table-column v-if="showAuditor" label="修改人员" prop="updateMember" width="150"></el-table-column>
      <el-table-column v-if="showAuditor" label="审核时间" prop="checkDate" width="150"></el-table-column>
      <el-table-column v-if="showAuditor" label="审核人员" prop="checkMember" width="150"></el-table-column>
      <el-table-column align="center" label="操作" width="230">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="small" type="success" @click="handleCheck(scope.row)">审核</el-button>
          <el-button size="mini" type="success" @click="handleCopy(scope.row)">复制</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 列表页面下侧 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page"
        :page-sizes="[10,20,30,50]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 列表页面下侧 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :fullscreen="true">
      <el-form
        class="small-space"
        :model="temp"
        :rules="rules"
        ref="form"
        label-position="left"
        label-width="100px"
        style="width: 650px; margin-left:50px;"
      >
        <el-form-item label="状态" prop="enable">
          <el-select v-model="temp.enable" clearable placeholder="请选择">
            <el-option
              v-for="item in enableOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="等级">
          <el-select v-model="temp.level" placeholder="请选择等级">
            <el-option v-for="item in levels" :key="item.value" :value="item.label"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="培训课程">
          <el-button type="primary" @click="showClasses">添加培训课程</el-button>
          <el-table :data="temp.pcreList" size="medium">
            <el-table-column type="index" width="60"></el-table-column>
            <!-- <el-table-column label="培训岗位" prop="scope.row.postDescr">
            <template slot-scope="scope"><span style="margin-left: 10px">{{scope.row.postDescr}}</span></template>
            </el-table-column>-->
            <el-table-column label="岗位性质" prop="scope.row.tyds">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.tyds}}</span>
              </template>
            </el-table-column>
            <el-table-column label="课程等级" width="90" prop="scope.row.level">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.level}}</span>
              </template>
            </el-table-column>
            <el-table-column label="培训课程" width="90" prop="scope.row.clds">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.clds}}</span>
              </template>
            </el-table-column>
            <el-table-column label="课时" prop="scope.row.hour">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.hour}}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="scope.row.enable">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.enable | pEnableFilter}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  v-if="dialogStatus == 'update'"
                  @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="累计课时" prop="hour2">
          <el-input placeholder="累计课时" v-model="temp.hour2" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="是否关联规章制度" prop="relaRule">
          <el-radio-group v-model="temp.relaRule">
            <el-radio-button label="是"></el-radio-button>
            <el-radio-button label="否"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="关联规章制度">
          <file-tree2
            :dcksQNKey.sync="temp.ruleQNkey"
            :dcksValue.sync="temp.ruleValue"
            :dcksLabel.sync="temp.ruleLabel"
            :isMultiple="true"
            :checkStrictly="true"
            :showCheckbox="true"
            :isDialog="false"
            descrName="运营规章"
            :rootId="4"
          ></file-tree2>
        </el-form-item>
        <el-form-item label="优先级别" prop="level">
          <el-select v-model="temp.level" clearable placeholder="请选择">
            <el-option
              v-for="item in levelOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划类型" prop="type">
          <el-select v-model="temp.type" clearable placeholder="请选择">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学习资料库">
          <!-- v-for="(file, index) in temp.fileLib" :key="index" -->
          <!-- <file-tree :dcksQNKey.sync="file.fileQNkey" :dcksValue.sync="file.fileValue" :dcksLabel.sync="file.fileLabel" :isMultiple="true" :checkStrictly="true" :showCheckbox="true" :isDialog="false"></file-tree> -->
          <file-tree
            :dcksQNKey.sync="temp.fileQNkey"
            :dcksValue.sync="temp.fileValue"
            :dcksLabel.sync="temp.fileLabel"
            :isMultiple="true"
            :checkStrictly="true"
            :showCheckbox="true"
            :isDialog="false"
          ></file-tree>
        </el-form-item>
        <el-form-item label="培训日期" prop="date">
          <el-date-picker
            v-model="temp.date"
            align="right"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="培训时间" prop="time">
          <el-time-select
            v-model="temp.time"
            clearable
            :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
            placeholder="选择时间"
          ></el-time-select>
        </el-form-item>
        <el-form-item label="培训地点" prop="place">
          <el-input v-model="temp.place"></el-input>
        </el-form-item>
        <el-form-item label="需要培训小结" prop="needSum">
          <el-select v-model="temp.needSum" clearable placeholder="请选择">
            <el-option
              v-for="item in needSumOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训班组" prop="orgCode">
          <!-- <el-tree :data= "data2" show-checkbox :default-expand-all=false node-key="id" ref="tree" :default-checked-keys ="cks" :highlight-current=true :props="defaultProps"></el-tree> -->
          <org-tree
            :dcksValue.sync="temp.orgCode"
            :dcksLabel.sync="temp.orgDescr"
            :checkStrictly="true"
            :isDialog="true"
          ></org-tree>
        </el-form-item>
        <el-form-item label="授课人" prop="teacher">
          <cmts :dynamicTags="temp.teacher"></cmts>
        </el-form-item>
        <el-form-item label="培训对象" prop="students">
          <cmts :dynamicTags="temp.students"></cmts>
        </el-form-item>
        <el-form-item label="培训形式" prop="form">
          <el-select v-model="temp.form" clearable multiple placeholder="请选择">
            <el-option
              v-for="item in formOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训类别" prop="cate">
          <el-select v-model="temp.cate" clearable placeholder="请选择">
            <el-option
              v-for="item in cateOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训目的" prop="aim">
          <el-input type="textarea" autosize v-model="temp.aim"></el-input>
        </el-form-item>
        <el-form-item label="培训内容" prop="content">
          <el-input type="textarea" autosize v-model="temp.content"></el-input>
        </el-form-item>
        <el-form-item label="培训材料" prop="files">
          <Fileup :vfiles.sync="temp.files"></Fileup>
        </el-form-item>
        <el-form-item label="培训岗位" prop="post">
          <el-input v-model="temp.post"></el-input>
        </el-form-item>
        <el-form-item label="培训项目" prop="item">
          <el-input type="textarea" autosize v-model="temp.item"></el-input>
        </el-form-item>
        <el-form-item label="培训课时" prop="hour">
          <el-select v-model="temp.hour" clearable placeholder="请选择">
            <el-option
              v-for="item in hourOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="create">确 定</el-button>
        <el-button v-else-if="dialogStatus=='copy'" type="primary" @click="copy">确 定</el-button>
        <el-button v-else type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="textMap[clstDialogStatus]" :visible="clstDialogFormVisible" width="100">
      <el-form :model="pcre" ref="form2" :rules="rules2">
        <el-form-item label="岗位性质" prop="poca">
          <el-select v-model="pcre.poca" placeholder="选择培训岗位性质" @change="changeClstLevel">
            <el-option
              v-for="item in pocas"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程等级" prop="level">
          <el-select v-model="pcre.level" placeholder="请选择等级" @change="changeClst">
            <el-option v-for="item in levels" :key="item.value" :value="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训课程" prop="clst">
          <el-select v-model="pcre.clst" placeholder="请选择课程">
            <el-option
              v-for="item in clsts"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课时" prop="hour">
          <el-input-number v-model="pcre.hour" :step="0.5"></el-input-number>
        </el-form-item>
        <el-form-item v-if="clstDialogStatus=='update'" label="状态" prop="enable">
          <el-select v-model="pcre.enable" clearable placeholder="请选择">
            <el-option
              v-for="item in pEnableOptions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="clstDialogStatus=='create'" type="primary" @click="addPcre">新 增</el-button>
        <el-button v-else type="primary" @click="updatePcre">更 新</el-button>
        <el-button @click="clstDialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchList,
  create,
  update,
  del,
  check,
  //   postSel,
  pocaSel,
  getClstLevel,
  getClstList
} from "@/api/plan";
// import { createActual } from "@/api/actual";
import orgTree from "@/components/OrgTree/orgTree";
import fileTree from "@/components/FileTree/fileTree";
import fileTree2 from "@/components/FileTree/fileTree2";
// import { fetchMemberList } from "@/api/member";
import cmts from "@/components/Customer/csMemberTags";
import Fileup from "@/components/fileup/fileup";
import waves from "@/directive/waves/index.js"; // 水波纹指令
import { mapGetters } from "vuex";

export default {
  name: "x",
  directives: {
    waves
  },
  components: { cmts, orgTree, Fileup, fileTree, fileTree2 },
  computed: {
    ...mapGetters([
      "name",
      "roles",
      "myWorkShop"
      // "orgCode", "orgDescr"
    ])
  },
  data() {
    return {
      //   uploadUrl: process.env.uploadUrl,
      downloadUrl: process.env.downloadUrl,
      //   downloadUrlQn: process.env.downloadUrlQn,
      sels: [],
      list: null,
      showAuditor: false,
      total: null,
      listQuery: {
        page: 1,
        limit: 20,
        date: undefined,
        type: undefined,
        enable: undefined,
        orgCode: [],
        orgDescr: [],
        // sort: "+id",
        sort: "-date,+enable",
        actualEnable: undefined,
        item: undefined
      },
      dateSech: "2019-01-01",
      //   fileList: [],
      enableOptions: [
        { value: "0", label: "草稿" },
        { value: "1", label: "待审核" }
        // { value: "2", label: "已审核"},
      ],
      enableOptions2: [
        { value: "0", label: "草稿" },
        { value: "1", label: "待审核" },
        { value: "2", label: "已审核" }
      ],
      typeOptions: [
        { value: "0", label: "月计划" },
        { value: "1", label: "临时计划" }
      ],
      levelOptions: [
        { value: "0", label: "高" },
        { value: "1", label: "中" },
        { value: "2", label: "低" }
      ],
      formOptions: [
        { value: "理论", label: "理论" },
        { value: "实操", label: "实操" },
        { value: "演练", label: "演练" },
        { value: "技术比武", label: "技术比武" }
      ],
      cateOptions: [
        { value: "0", label: "质量" },
        { value: "1", label: "安全" },
        { value: "2", label: "技术" },
        { value: "3", label: "管理" },
        { value: "4", label: "其他" }
      ],
      hourOptions: [
        { value: "1", label: "1课时" },
        { value: "2", label: "2课时" },
        { value: "3", label: "3课时" },
        { value: "4", label: "4课时" }
      ],
      needSumOptions: [
        { value: "0", label: "否" },
        { value: "1", label: "是" }
      ],
      temp: {
        id: undefined,
        enable: "",
        level: "",
        type: "",
        orgCode: [],
        orgDescr: [],
        date: "",
        time: "",
        place: "",
        form: [],
        cate: "",
        item: "",
        aim: "",
        hour: "",
        hour2: "",
        teacher: [],
        content: "",
        post: "",
        poca: "",
        students: [],
        needSum: "",
        files: [],
        fileQNkey: [], //学习资料库
        fileValue: [], //学习资料库
        fileLabel: [], //学习资料库
        relaRule: "",
        ruleQNkey: [], //关联规章制度
        ruleValue: [], //关联规章制度
        ruleLabel: [], //关联规章制度
        pcreList: []
        // post2: ""
      },
      //   posts: [],  //岗位
      pocas: [], //岗位性质
      pcre: {
        poca: "",
        tyds: "",
        level: "",
        clst: "",
        hour: 1,
        tyds: "",
        clst: ""
      },
      //   pcreDialogStatus: "",
      levels: [
        // { value: "初级（岗前培训）", label: "初级（岗前培训）" },
        // { value: "中级", label: "中级" },
        // { value: "高级", label: "高级" }
      ],
      options: [],
      selectedOptions2: [],
      options: [],
      clsts: [],
      //   num: 1,
      tag: "",
      key: [],
      checkids: { ids: "" },
      delids: { ids: "" },
      cpids: { ids: "" },
      textMap: {
        update: "编辑",
        create: "创建",
        copy: "复制"
      },
      dialogFormVisible: false,
      dialogStatus: "",
      tableKey: 0,
      rules: {
        enable: [{ required: true, message: "请选择状态", trigger: "blur" }],
        level: [{ required: true, message: "请选择优先级别", trigger: "blur" }],
        type: [{ required: true, message: "请选择计划类型", trigger: "blur" }],
        date: [{ required: true, message: "请选择培训日期", trigger: "blur" }],
        time: [{ required: true, message: "请选择培训时间", trigger: "blur" }],
        place: [{ required: true, message: "请填写培训地点", trigger: "blur" }],
        needSum: [
          { required: true, message: "请选择是否需要培训小结", trigger: "blur" }
        ],
        orgCode: [
          { required: true, message: "请选择培训班组", trigger: "blur" }
        ],
        teacher: [{ required: true, message: "请选择授课人", trigger: "blur" }],
        students: [
          { required: true, message: "请选择培训对象", trigger: "blur" }
        ],
        form: [{ required: true, message: "请选择培训形式", trigger: "blur" }],
        cate: [{ required: true, message: "请选择培训类别", trigger: "blur" }],
        item: [
          {
            required: true,
            max: 255,
            message: "长度小于255个字符",
            trigger: "blur"
          }
        ],
        aim: [
          {
            required: true,
            max: 255,
            message: "长度小于255个字符",
            trigger: "blur"
          }
        ],
        content: [
          {
            required: true,
            max: 800,
            message: "长度小于800个字符",
            trigger: "blur"
          }
        ]
      },
      rules2: {
        poca: [{ required: true, message: "请选择岗位性质", trigger: "blur" }],
        level: [{ required: true, message: "请选择课程等级", trigger: "blur" }],
        clst: [{ required: true, message: "请选择课程", trigger: "blur" }],
        hour: [{ required: true, trigger: "blur" }],
        enable: [{ required: true, trigger: "blur" }]
      },
      defaultProps: {
        children: "children",
        label: "label"
      },
      clstList: [],
      clstDialogStatus: "",
      clstDialogFormVisible: false,
      pEnableOptions: [
        { value: "0", label: "无效" },
        { value: "1", label: "有效" }
        // { value: "2", label: "已审核"},
      ]
    };
  },
  created() {
    this.getList();
    // this.getPosts();
    // this.getPocas();
  },

  filters: {
    enableFilter: function(value) {
      if ("0" === value) {
        return "草稿";
      } else if ("1" === value) {
        return "待审核";
      } else if ("2" === value) {
        return "已审核";
      } else if ("-2" === value) {
        return "删除";
      }
    },
    levelFilter: function(value) {
      if ("0" === value) {
        return "高";
      } else if ("1" === value) {
        return "中";
      } else if ("2" === value) {
        return "低";
      }
    },
    typeFilter: function(value) {
      if ("0" === value) {
        return "月计划";
      } else if ("1" === value) {
        return "临时计划";
      }
    },
    hourFilter: function(value) {
      if ("1" === value) {
        return "1课时";
      } else if ("2" === value) {
        return "2课时";
      } else if ("3" === value) {
        return "3课时";
      } else if ("4" === value) {
        return "4课时";
      }
    },
    cateFilter: function(value) {
      if ("0" === value) {
        return "质量";
      } else if ("1" === value) {
        return "安全";
      } else if ("2" === value) {
        return "技术";
      } else if ("3" === value) {
        return "管理";
      } else if ("4" === value) {
        return "其他";
      }
    },
    pEnableFilter: function(value) {
      if ("0" === value) {
        return "无效";
      } else if ("1" === value) {
        return "有效";
      }
    }
  },
  methods: {
    getList() {
      this.$store.dispatch("openLoading");
      //   console.log("this.listQuery.orgCode", this.listQuery.orgCode);
      //   console.log("this.listQuery.item", this.listQuery.item);
      fetchList(this.listQuery).then(response => {
        // debugger
        if (response.status === 200 && response.data.code === 2000) {
          //   console.log("response.data.items", response.data.items);
          this.list = response.data.items;
          //   console.log("this.list", this.list);
          this.total = response.data.total;
        } else {
          console.log(response);
          this.$notify({
            title: "失败1",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
        this.$store.dispatch("closeLoading");
      });
    },
    // getPosts() {
    //   postSel().then(response => {
    //     // debugger
    //     this.posts = response.data.items;
    //   });
    // },
    getPocas() {
      pocaSel().then(response => {
        // debugger
        this.pocas = response.data.items;
      });
    },
    changeClstLevel() {
      getClstLevel(this.pcre.poca).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.levels = response.data.items;
          this.pcre.level = "";
          this.pcre.clst = "";
          //   console.log(this.levels);
        } else {
          console.log(response);
          this.$notify({
            title: "失败1",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
        this.$store.dispatch("closeLoading");
      });
    },
    showClasses() {
      this.getPocas();
      this.clstDialogFormVisible = true;
      this.clstDialogStatus = "create";
      this.resetPcre();
    },
    getClst() {
      getClstList(this.pcre.poca, encodeURI(encodeURI(this.pcre.level))).then(
        response => {
          // debugger
          if (response.status === 200 && response.data.code === 2000) {
            this.clsts = response.data.items;
          } else {
            console.log(response);
            this.$notify({
              title: "失败1",
              message: response.status + response.data.msg,
              type: "error",
              duration: 200000
            });
          }
          this.$store.dispatch("closeLoading");
        }
      );
    },
    changeClst() {
      getClstList(this.pcre.poca, encodeURI(encodeURI(this.pcre.level))).then(
        response => {
          // debugger
          if (response.status === 200 && response.data.code === 2000) {
            this.clsts = response.data.items;
            this.pcre.clst = "";
            // console.log("this.clsts", this.clsts);
          } else {
            console.log(response);
            this.$notify({
              title: "失败1",
              message: response.status + response.data.msg,
              type: "error",
              duration: 200000
            });
          }
          this.$store.dispatch("closeLoading");
        }
      );
    },
    handleEdit(index, row) {
      this.clstDialogStatus = "update";
      this.clstDialogFormVisible = true;
      this.pcre = Object.assign({}, row);
      //   this.issue = JSON.parse(JSON.stringify(row));
      //   console.log("index", index);
      //   console.log("row", row);
      // console.log("this.pcre", this.pcre);
      this.getPocas();
      this.getClst();
    },
    addPcre() {
      this.$refs["form2"].validate(async valid => {
        if (valid) {
          this.getTyds();
          this.getClds();
          this.temp.pcreList.unshift(this.pcre);
          this.clstDialogFormVisible = false;
          var hour = 0;
          for (var x of this.temp.pcreList) {
            if (x.enable === "1") {
              hour = Number(hour) + Number(x.hour);
            }
          }
          this.temp.hour2 = hour;
        }
      });
    },
    getTyds() {
      for (var x of this.pocas) {
        if (x.value === this.pcre.poca) {
          this.pcre.tyds = x.label;
        }
      }
    },
    getClds() {
      for (var x of this.clsts) {
        if (x.value === this.pcre.clst) {
          this.pcre.clds = x.label;
        }
      }
    },
    updatePcre() {
      this.$refs["form2"].validate(async valid => {
        if (valid) {
          for (const v of this.temp.pcreList) {
            if (v.id === this.pcre.id) {
              const index = this.temp.pcreList.indexOf(v);
              this.getTyds();
              this.getClds();
              this.temp.pcreList.splice(index, 1, this.pcre);
              var hour = 0;
              for (var x of this.temp.pcreList) {
                if (x.enable === "1") {
                  hour = Number(hour) + Number(x.hour);
                }
              }
              this.temp.hour2 = hour;
              break;
            }
          }
          this.clstDialogFormVisible = false;
        }
      });
    },

    resetPcre() {
      this.pcre = {
        id: undefined,
        poca: "",
        level: "",
        clst: "",
        hour: 1,
        enable: "1"
      };
    },
    handleChange() {
      console.log(handleChange);
    },
    dateSechChange(val) {
      this.listQuery.date = val;
    },

    handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
    },

    handleUpdate(row) {
      // this.temp = Object.assign({}, row);
      this.temp = JSON.parse(JSON.stringify(row));
      // console.log("handleUpdate", this.temp);
      // console.log("name", this.name);
      // console.log("this.temp.createMember", this.temp.createMember);
      if (this.temp.enable != "2") {
        // console.log("this.roles", this.roles);
        // console.log("this.temp.workShopId",this.temp.workShopId)
        // console.log("this.myWorkShop",this.myWorkShop)
        if (
          this.temp.createMember === this.name ||
          this.roles.indexOf("TRI002") > -1
        ) {
          if (
            this.temp.workShopId === "" ||
            this.temp.workShopId === null ||
            this.temp.workShopId === this.myWorkShop
          ) {
            this.dialogStatus = "update";
            this.dialogFormVisible = true;
          } else {
            this.$notify({
              title: "失败",
              message: "无权限，无法更新(仅可修改本车间培训计划)",
              type: "error",
              duration: 2000
            });
          }
        } else {
          this.$notify({
            title: "失败",
            message: "无权限，无法更新(仅计划创建人或培训管理员可修改)",
            type: "error",
            duration: 2000
          });
        }
      } else {
        //   if(this.roles.indexOf("TRI001")>-1){
        //       this.dialogStatus = "update";
        //       this.dialogFormVisible = true;
        //   }else{
        this.$notify({
          title: "失败",
          message: "无法更新",
          type: "error",
          duration: 2000
        });
        //   }
      }
    },
    selsChange(sels) {
      this.sels = sels;
    },
    handleDel() {
      this.$confirm("删除?", "提示", { type: "warning" })
        .then(async () => {
          this.$store.dispatch("openLoading");
          const idg = this.sels.map(item => item.id); //['1','2','3']
          //   console.log(idg);
          for (const y of this.sels) {
            // console.log("y.createMember", y.createMember);
            // console.log("this.name", this.name);
            if (y.enable === "2" || y.createMember != this.name) {
              const index1 = idg.indexOf(y.id);
              const index2 = this.sels.indexOf(y);
              // console.log("index1", index1);
              // console.log("index2", index2);
              idg.remove(index1);
              this.sels.remove(index2);
              // console.log("idg", idg);
              // console.log("this.sels", this.sels);
            }
          }
          //   console.log("idg", idg);
          //   console.log("this.sels", this.sels);
          this.delids.ids = this.sels.map(item => item.id).join(); //'1,2,3'
          //   console.log(this.delids.ids);
          const res = await del(this.delids);
          // debugger
          if (res.data.code == 2000) {
            for (const y of idg) {
              for (const v of this.list) {
                if (v.id === y) {
                  const index = this.list.indexOf(v);
                  this.list.splice(index, 1);
                  break;
                }
              }
            }
            // console.log(this.list.length)
            // console.log(idg.length)
            this.total = this.list.length;
            // console.log("this.total",this.total)
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000
            });
          } else {
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "失败",
              message: "删除失败",
              type: "error",
              duration: 2000
            });
          }
        })
        .catch(() => {
          this.$store.dispatch("closeLoading");
          this.$notify({
            title: "失败",
            message: "删除失败",
            type: "error",
            duration: 2000
          });
        });
    },

    handleCopy(row) {
      // this.temp = Object.assign({}, row);
      this.temp = JSON.parse(JSON.stringify(row));
      // this.temp.enable = "0";
      // console.log("handleCopy", this.temp);
      //   console.log("name", this.name);
      //   console.log("this.temp.createMember", this.temp.createMember);
      if (this.temp.enable != "-2") {
        // console.log("this.roles", this.roles);
        // console.log(
        //   " this.roles.indexOf('TRI002')",
        //   this.roles.indexOf("TRI002")
        // );
        // if (
        //   this.temp.createMember === this.name ||
        //   this.roles.indexOf("TRI002") > -1
        // ) {
        this.dialogStatus = "copy";
        this.dialogFormVisible = true;
        this.temp.enable = "0";
        // } else {
        //   this.$notify({
        //     title: "失败",
        //     message: "无权限，无法复制",
        //     type: "success",
        //     duration: 2000
        //   });
        // }
      } else {
        this.$notify({
          title: "失败",
          message: "无法复制",
          type: "error",
          duration: 2000
        });
      }
    },
    copy() {
      this.$store.dispatch("openLoading");
      this.$refs["form"].validate(async valid => {
        if (valid) {
          if (
            (this.temp.relaRule === "是" &&
              this.temp.ruleLabel.length == 0 &&
              this.temp.ruleValue.length == 0) ||
            (this.temp.relaRule === "否" &&
              this.temp.ruleLabel.length != 0 &&
              this.temp.ruleValue.length != 0)
          ) {
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "失败",
              message: "提交失败" + ",请检查关联规章是否为空",
              type: "error",
              duration: 2000
            });
          } else {
            const res = await create(this.temp);
            if (res.data.code == 2000) {
              this.temp.id = res.data.item.id;
              this.list.unshift(this.temp);
              this.total = this.list.length;
              this.$store.dispatch("closeLoading");
              this.$notify({
                title: "成功",
                message: "复制成功",
                type: "success",
                duration: 2000
              });
            } else {
              this.$store.dispatch("closeLoading");
              this.$notify({
                title: "失败",
                message: "复制失败" + res.data.msg,
                type: "error",
                duration: 2000
              });
            }
            this.dialogFormVisible = false;
          }
        } else {
          this.$store.dispatch("closeLoading");
          console.log("error submit!!");
          return false;
          this.dialogFormVisible = false;
        }
        // this.dialogFormVisible = false;
      });
    },
    create() {
      // validate
      this.$store.dispatch("openLoading");
      this.$refs["form"].validate(async valid => {
        if (valid) {
          // console.log("create", this.temp);
          if (
            (this.temp.relaRule === "是" &&
              this.temp.ruleLabel.length == 0 &&
              this.temp.ruleValue.length == 0) ||
            (this.temp.relaRule === "否" &&
              this.temp.ruleLabel.length != 0 &&
              this.temp.ruleValue.length != 0)
          ) {
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "失败",
              message: "提交失败" + ",请检查关联规章是否为空",
              type: "error",
              duration: 2000
            });
          } else {
            const res = await create(this.temp);
            // debugger
            if (res.data.code == 2000) {
              // console.log("res.data", res.data);
              this.temp.id = res.data.item.id;
              this.temp.enable = "1";
              this.temp.workShopId = this.myWorkShop;
              this.temp.createMember = this.name;
              // console.log("this.temp.pcreList", this.temp.pcreList);
              // console.log("res.data.ids", res.data.ids);
              if (res.data.ids.length != 0) {
                //                有新增课程，将后台的课程id更新过来
                for (var i = 0; i < this.temp.pcreList.length; i++) {
                  this.temp.pcreList[i].id = res.data.ids[i].id;
                }
              }
              this.list.unshift(this.temp);
              // console.log("this.temp", this.temp);
              // console.log("this.list", this.list);
              this.$store.dispatch("closeLoading");
              this.$notify({
                title: "成功",
                message: "创建成功",
                type: "success",
                duration: 2000
              });
            } else {
              this.$store.dispatch("closeLoading");
              this.$notify({
                title: "失败",
                message: "创建失败",
                type: "error",
                duration: 2000
              });
            }
            this.dialogFormVisible = false;
          }
        } else {
          this.$store.dispatch("closeLoading");
          console.log("error submit!!");
          return false;
          this.dialogFormVisible = false;
        }
        // this.dialogFormVisible = false;
      });
    },
    update() {
      this.$store.dispatch("openLoading");
      this.$refs["form"].validate(async valid => {
        if (valid) {
          // console.log("update", this.temp);
          if (
            (this.temp.relaRule === "是" &&
              this.temp.ruleLabel.length == 0 &&
              this.temp.ruleValue.length == 0) ||
            (this.temp.relaRule === "否" &&
              this.temp.ruleLabel.length != 0 &&
              this.temp.ruleValue.length != 0)
          ) {
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "失败",
              message: "提交失败" + ",请检查关联规章是否为空",
              type: "error",
              duration: 2000
            });
          } else {
            const res = await update(this.temp);
            if (res.data.code == 2000) {
              for (const v of this.list) {
                if (v.id === this.temp.id) {
                  const index = this.list.indexOf(v);
                  // console.log("update", this.temp);
                  // console.log("this.temp.pcreList", this.temp.pcreList);
                  // console.log("res.data.ids", res.data.ids);
                    //                有新增课程，将后台的课程id更新过来
                    if(res.data.ids.length!=0){
                        var j = 0;
                       for (var i = 0; i < this.temp.pcreList.length; i++) {
                            if (this.temp.pcreList[i].id == null) {
                                this.temp.pcreList[i].id = res.data.ids[j].id;
                                j++;
                              }
                      }
                    }
                  this.list.splice(index, 1, this.temp);
                  // console.log("update", this.list);
                  break;
                }
              }
              this.$store.dispatch("closeLoading");
              this.$notify({
                title: "成功",
                message: "更新成功",
                type: "success",
                duration: 2000
              });
            } else {
              this.$store.dispatch("closeLoading");
              this.$notify({
                title: "失败",
                message: "更新失败" + res.data.msg,
                type: "error",
                duration: 2000
              });
            }
            this.dialogFormVisible = false;
          }
        } else {
          this.$store.dispatch("closeLoading");
          console.log("error submit!!");
          return false;
          this.dialogFormVisible = false;
        }
        // this.dialogFormVisible = false;
      });
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        enable: "1",
        level: "",
        type: "",
        orgCode: [],
        orgDescr: [],
        date: "",
        time: "",
        place: "",
        form: [],
        cate: "",
        item: "",
        aim: "",
        hour: "",
        hour2: "",
        teacher: [],
        content: "",
        post: "",
        // post2: "",
        students: [],
        needSum: "",
        files: [],
        fileQNkey: [],
        fileValue: [],
        fileLabel: [],
        relaRule: "是",
        ruleQNkey: [], //关联规章制度
        ruleValue: [], //关联规章制度
        ruleLabel: [], //关联规章制度
        pcreList: []
      };
    },

    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },

    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [
          "ID",
          "计划状态",
          "优先级别",
          "计划类型",
          "培训日期",
          "培训时间",
          "培训地点",
          "培训课时",
          "是否需要培训小结",
          "培训班组",
          "培训岗位",
          "授课人",
          "培训对象",
          "培训形式",
          "培训类别",
          "培训项目",
          "培训目的",
          "培训内容",
          "创建时间",
          "创建人员",
          "修改时间",
          "修改人员",
          "审核时间",
          "审核人员"
        ];
        const filterVal = [
          "id",
          "enable",
          "level",
          "type",
          "date",
          "time",
          "place",
          "hour",
          "needSum",
          "orgDescr",
          "post",
          "teacher",
          "students",
          "form",
          "cate",
          "item",
          "aim",
          "content",
          "createDate",
          "createMember",
          "updateDate",
          "updateMember",
          "checkDate",
          "checkMember"
        ];
        const data = this.formatJson(filterVal, this.list);
        excel.export_json_to_excel(tHeader, data, "培训计划");
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "tel") {
            return "不可下载";
          } else {
            // 计划状态
            if (j === "enable") {
              for (const x of this.enableOptions2) {
                if (x.value === v[j]) {
                  return x.label;
                  break;
                }
              }
            }
            // 优先级别
            if (j === "level") {
              for (const x of this.levelOptions) {
                if (x.value === v[j]) {
                  return x.label;
                  break;
                }
              }
            }
            // 计划类型
            if (j === "type") {
              for (const x of this.typeOptions) {
                if (x.value === v[j]) {
                  return x.label;
                  break;
                }
              }
            }
            // 培训课时
            if (j === "hour") {
              for (const x of this.hourOptions) {
                if (x.value === v[j]) {
                  return x.label;
                  break;
                }
              }
            }
            // 需要培训小结
            if (j === "needSum") {
              for (const x of this.needSumOptions) {
                if (x.value === v[j]) {
                  return x.label;
                  break;
                }
              }
            }
            // 培训形式
            if (j === "form") {
              for (const x of this.formOptions) {
                if (x.value === v[j]) {
                  return x.label;
                  break;
                }
              }
            }
            // 培训类别
            if (j === "cate") {
              for (const x of this.cateOptions) {
                if (x.value === v[j]) {
                  return x.label;
                  break;
                }
              }
            }
            return v[j];
          }
        })
      );
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleCheck(row) {
      this.temp = JSON.parse(JSON.stringify(row));
      //   console.log("this.myWorkShop", this.myWorkShop);
      //   console.log("this.roles", this.roles);
      //   console.log("this.temp", this.temp);
      //   console.log("this.temp.workShopId", this.temp.workShopId);
      //草稿状态
      if (this.temp.enable === "0") {
        this.$notify({
          title: "失败",
          message: "审核失败(草稿状态不可审核,必须为待审核状态)",
          type: "error",
          duration: 2000
        });
        // 待审核
      } else if (this.temp.enable === "1") {
        if (
          (this.roles.indexOf("TRI002") > -1 &&
            (this.temp.workShopId === "" ||
              this.temp.workShopId === null ||
              this.temp.workShopId === this.myWorkShop)) ||
          this.roles.indexOf("TRI004") > -1
        ) {
          //车间培训管理员需要匹配车间，中心级培训管理员则不需要
          this.$confirm("确认审核?", "提示", { type: "warning" })
            .then(async () => {
              this.$store.dispatch("openLoading");
              // const idg = this.sels.map(item => item.id); //['1','2','3']
              // console.log(idg);
              // this.checkids.ids = this.sels.map(item => item.id).join(); //'1,2,3'
              // console.log(this.checkids.ids)
              this.checkids.ids = this.temp.id;
              const res = await check(this.checkids);
              // debugger
              if (res.data.code == 2000) {
                // for (const y of idg) {
                for (const v of this.list) {
                  if (v.id === this.temp.id) {
                    const index = this.list.indexOf(v);
                    v.enable = "2";
                    v.checkDate = res.data.currentTime;
                    v.checkMember = res.data.currentMemberId;
                    this.list.splice(index, 1, v);
                    break;
                  }
                }
                // }
                this.$store.dispatch("closeLoading");
                this.$notify({
                  title: "成功",
                  message: "审核成功",
                  type: "success",
                  duration: 2000
                });
              } else if (res.data.code == 4030) {
                // console.log(res.data.msg)
              } else {
                this.$store.dispatch("closeLoading");
                this.$notify({
                  title: "失败",
                  message: "审核失败",
                  type: "error",
                  duration: 2000
                });
              }
            })
            .catch(() => {
              this.$store.dispatch("closeLoading");
              this.$notify({
                title: "失败",
                message: "审核取消",
                type: "error",
                duration: 2000
              });
            });
        } else if (
          this.roles.indexOf("TRI002") > -1 &&
          this.temp.workShopId != this.myWorkShop
        ) {
          // 车间培训管理员，但是我的车间与计划车间不匹配
          this.$notify({
            title: "失败",
            message: "审核失败(仅可审核本车间培训计划)",
            type: "error",
            duration: 2000
          });
        } else {
          //非培训管理员
          this.$store.dispatch("closeLoading");
          this.$notify({
            title: "失败",
            message: "在我的角色对应的权限里,没有审核权限",
            //   message: res.data.msg,
            type: "error",
            duration: 2000
          });
        }
      } else {
        this.$notify({
          title: "失败",
          message: "审核失败",
          type: "error",
          duration: 2000
        });
      }
    }
  }
};
</script>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>